<template>
  <div class="padding-middle">
    <el-card>
      <el-form ref="ruleForm" :model="postForm" :rules="rules" label-width="80px" label-position="right" class="demo-ruleForm">
        <el-form-item label="考试类型" label-width="50" prop="examType">
          <el-select v-model="postForm.examType" placeholder="请选择" style="width: 300px;margin-left:30px" @change="changeCoures">
            <el-option
              v-for="(item, index) in options1"
              :key="index"
              :label="item"
              :value="item"/>
          </el-select>
        </el-form-item>
        <el-form-item label="课程分类" label-width="50" prop="courseCategoryId">
          <el-select v-model="postForm.courseCategoryId" placeholder="请选择" no-data-text="没有数据" style="width: 300px;margin-left:30px">
            <el-option
              v-for="item in options2"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
          </el-select>
        </el-form-item>
        <el-form-item label="科目名称" label-width="50" prop="name">
          <el-input v-model="postForm.name" style="width:300px;margin-left:30px"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
          <el-button @click="cancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import axios from 'axios'
import { types } from '@/assets/type.js'
export default {
  components: { },
  data() {
    return {
      examType: '',
      postForm: {
        examType: '',
        name: '',
        courseCategoryId: ''
      },
      rules: {
        examType: [
          { required: true, message: '请选择考试类型', trigger: 'change' }
        ],
        courseCategoryId: [
          { required: true, message: '请选择课程分类名称' }
        ],
        name: [
          { required: true, message: '请输入科目名称', trigger: 'blur' }
        ]
      },
      options2: [],
      options1: types
    }
  },
  mounted() {
    if (this.$route.params.name !== undefined && this.$route.params.examType !== undefined && this.$route.params.courseCategoryId !== undefined) {
      this.postForm.name = this.$route.params.name
      this.postForm.examType = this.$route.params.examType
      this.postForm.courseCategoryId = this.$route.params.courseCategoryId
      this.options2 = [{ value: this.$route.params.courseCategoryId, label: this.$route.params.courseCategoryName }]
    } else {
      this.postForm.name = ''
      this.postForm.examType = ''
      this.postForm.examType = ''
    }
  },
  methods: {
    changeCoures(option) {
      this.examType = option
      this.postForm.courseCategoryId = ''
      this.getCourseCategoryList()
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          axios.post(`/saveCourseSubject`, this.postForm).then(res => {
            if (res.success) {
              this.$router.push('/coursemanagement/addSubject/list')
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    cancel() {
      this.$router.push('/coursemanagement/addSubject/list')
    },
    getCourseCategoryList() {
      axios.get(`/getCourseCategoryListXiaLa/${this.postForm.examType}`).then(res => {
        if (res.success) {
          const items = []
          res.data.forEach((item) => {
            items.push({ value: item.id, label: item.name })
          })
          this.options2 = items
        }
      })
    }
  }
}
</script>

<style lang="scss">
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .el-form-item__error {
    color: #f56c6c;
    font-size: 12px;
    line-height: 1;
    padding-top: 4px;
    position: absolute;
    top: 100%;
    left: 107px;
  }
</style>
